<template>
    <view class="column-title">
        <view class="title">
            <text class="title-tit">{{data.title}}</text>
            <view class="sign" :style="{'background-image': data.sign}"></view>
        </view>
    </view>
    <!-- <div class="column-title">
        <div class="title">
            <h2>{{data.title}}</h2>
            <span class="sign" :style="{'background-image': data.sign}"></span>
        </div>
        <div class="more" v-if="data.more">
            <nuxt-link :to="data.more.link" v-if="!data.more.blank">{{data.more.title}}</nuxt-link>
            <a :href="data.more.link" target="_blank" v-else>{{data.more.title}}</a>
        </div>
    </div> -->
</template>

<script>
export default {
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            // title: '名师榜'
        }
    }
}
</script>

<style lang="scss" scoped>
.column-title {
    display: flex;
    justify-content: space-between;
    .title {
        position: relative;
    }
    .title-tit {
        font-size:42rpx;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:48rpx;
        position: relative;
        z-index: 2;
    }
    .sign {
        display: block;
        width: 56rpx;
        height: 22rpx;
        border-radius: 100%;
        position: absolute;
        right: -16rpx;
        top: 14rpx;
        transform: rotate(-30deg);
    }
}
</style>
